<template>
  <el-collapse v-model="activeNames" accordion>
    <el-collapse-item :name="name" :disabled="disabled" :class="[{ 'is-disabled': disabled }]">
      <template #title>
        <div class="custom-collapse-header">
          <!-- 标题插槽 -->
          <slot name="title">
            <span class="edit-header-title">{{ title }}</span>
          </slot>

          <!-- 标题后的按钮插槽 -->
          <div class="header-actions" @click.stop>
            <slot name="actions"></slot>
          </div>
        </div>
      </template>
      <!-- 内容插槽 -->
      <slot></slot>
    </el-collapse-item>
  </el-collapse>
</template>

<script lang="ts" setup>
import type { CollapsePanelProps } from './type'

const props = withDefaults(defineProps<CollapsePanelProps>(), {
  defaultExpanded: false,
  disabled: false,
  name: '1',
  title: '',
})

const emit = defineEmits(['change'])

const activeNames = ref<string | number>(props.defaultExpanded ? props.name : '')

watch(
  () => props.defaultExpanded,
  newVal => {
    activeNames.value = newVal ? props.name : ''
  },
)

watch(activeNames, newVal => {
  emit('change', newVal === props.name)
})
</script>

<style lang="scss" scoped>
.el-collapse {
  border-top: none;
}

.edit-header-title {
  @apply relative h-21 pl-10 leading-21;

  color: #000;
  border-left: 4px solid #c41230;
}

.custom-collapse-header {
  display: flex;
  align-items: center;
  justify-content: space-start;
  width: 100%;

  .header-actions {
    display: flex;
    gap: 5px;
    margin-left: 10px;
  }
}
</style>
